<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<image src="/static/my/收起箭头小.png" class="nav-icon"></image>
				</view>
				<text class="nav-title">团购优惠</text>
				<view class="nav-right">
					<image src="/static/my/示警.png" class="nav-icon"></image>
				</view>
			</view>
		</view>

		<!-- 详情内容 -->
		<view class="detail-content" v-if="dealDetail">
			<!-- 标题和来源信息 -->
			<view class="header-info">
				<text class="main-title">{{ dealDetail.description }}</text>
				<view class="source-info">
					<text class="company">{{ dealDetail.company }}</text>
					<text class="create-time">{{ dealDetail.createTime }}</text>
				</view>
			</view>

			<!-- 优惠券横幅 -->
			<view class="coupon-banner">
				<image :src="dealDetail.image" class="banner-image" mode="aspectFill"></image>
				<view class="banner-overlay">
					<text class="coupon-title">{{ dealDetail.title }}</text>
					<text class="coupon-subtitle">{{ dealDetail.subtitle }}</text>
					<view class="coupon-arrow">
						<text class="arrow-text">></text>
					</view>
				</view>
			</view>

			<!-- 活动描述 -->
			<view class="activity-description">
				<text class="description-text">{{ getActivityDescription() }}</text>
			</view>

			<!-- 价格和活动信息 -->
			<view class="price-info">
				<view class="price-row">
					<text class="price-label">价格:</text>
					<text class="current-price">¥{{ dealDetail.currentPrice }}.00</text>
				</view>
				<view class="price-row">
					<text class="price-label">原价:</text>
					<text class="original-price">¥{{ dealDetail.originalPrice }}.00</text>
				</view>
				<view class="info-row">
					<text class="info-label">活动起止日期:</text>
					<text class="info-value">{{ dealDetail.startDate }}至{{ dealDetail.endDate }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">咨询电话:</text>
					<text class="info-value contact-phone" @click="makeCall">{{ dealDetail.contactPhone }}</text>
				</view>
				<view class="info-row">
					<text class="info-label">注意事项:</text>
					<text class="info-value">{{ dealDetail.notes }}</text>
				</view>
			</view>

			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button class="contact-btn" @click="makeCall">联系商家</button>
				<button class="buy-btn" @click="buyNow">立即购买</button>
			</view>
		</view>

		<!-- 加载状态 -->
		<view class="loading" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 错误状态 -->
		<view class="error" v-if="error">
			<text class="error-text">{{ error }}</text>
			<button class="retry-btn" @click="loadDealDetail">重试</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dealId: null,
				dealDetail: null,
				loading: false,
				error: null
			}
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			// 获取活动描述
			getActivityDescription() {
				if (!this.dealDetail) return '';
				
				// 根据不同的活动类型返回不同的描述
				const descriptions = {
					1: '哇噻!薅羊毛的看过来!易车修汽车维修服务中心出优惠团购了!纯手工洗车只要25元一次,还增20元油券,够意思了吧!',
					2: '清凉一夏，与沃同享!沃尔沃东区夏日主题购车节盛大开启!专业汽车服务，品质保证，限时优惠不容错过!',
					3: '春季保养套餐来袭!专业保养服务，让您的爱车焕然一新!包含机油更换、滤芯更换等多项服务，超值优惠!',
					4: '洗车美容套餐，专业服务品质保证!学生专享优惠，让您的爱车焕然一新，享受专业洗车美容服务!'
				};
				
				return descriptions[this.dealDetail.id] || this.dealDetail.description;
			},
			// 拨打电话
			makeCall() {
				if (!this.dealDetail || !this.dealDetail.contactPhone) return;
				
				uni.makePhoneCall({
					phoneNumber: this.dealDetail.contactPhone,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.error('拨打电话失败:', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			},
			// 立即购买
			buyNow() {
				if (!this.dealDetail) return;
				
				uni.showModal({
					title: '确认购买',
					content: `确定要购买"${this.dealDetail.title}"吗？\n价格：¥${this.dealDetail.currentPrice}.00`,
					success: (res) => {
						if (res.confirm) {
							// 这里后期会调用购买API
							this.processPurchase();
						}
					}
				});
			},
			// 处理购买逻辑
			processPurchase() {
				uni.showLoading({
					title: '处理中...'
				});
				
				// 模拟购买处理
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '购买成功',
						icon: 'success'
					});
					
					// 这里后期会跳转到订单页面或支付页面
					// uni.navigateTo({
					//     url: '/pages/order/order'
					// });
				}, 1500);
			},
			// 加载团购详情数据
			async loadDealDetail() {
				if (!this.dealId) {
					this.error = '缺少活动ID';
					return;
				}
				
				this.loading = true;
				this.error = null;
				
				try {
					// 这里后期会替换为真实的API调用
					// const response = await this.$api.getGroupBuyDetail(this.dealId);
					
					// 模拟API调用
					await new Promise(resolve => setTimeout(resolve, 1000));
					
					// 模拟数据
					const mockDeals = [
						{
							id: 1,
							title: '优惠券',
							subtitle: '免费发放活动进行中...',
							description: '汽车惠民活动走进群众生活',
							image: '/static/index/Snipaste_2025-09-05_20-48-05.jpg',
							originalPrice: 199,
							currentPrice: 99,
							startDate: '2023-3-10 08:00',
							endDate: '2023-3-18 23:59',
							contactPhone: '0379-66666666',
							notes: '暂无',
							company: '济源某某汽车行业',
							createTime: '2023/3/10 11:09',
							status: 'active'
						},
						{
							id: 2,
							title: '清凉一夏 与沃同享',
							subtitle: '沃尔沃东区夏日主题购车节',
							description: '汽车惠民活动走进企业合作',
							image: '/static/index/Snipaste_2025-09-05_20-48-16.jpg',
							originalPrice: 299,
							currentPrice: 199,
							startDate: '2023-3-15 08:00',
							endDate: '2023-3-25 23:59',
							contactPhone: '0379-88888888',
							notes: '限时优惠',
							company: '沃尔沃东区经销商',
							createTime: '2023/3/15 10:30',
							status: 'active'
						},
						{
							id: 3,
							title: '春季保养套餐',
							subtitle: '专业保养服务优惠活动',
							description: '汽车惠民活动走进社区服务',
							image: '/static/index/Snipaste_2025-09-03_22-46-30.jpg',
							originalPrice: 399,
							currentPrice: 299,
							startDate: '2023-3-20 08:00',
							endDate: '2023-3-30 23:59',
							contactPhone: '0379-77777777',
							notes: '包含机油更换',
							company: '易车修汽车维修服务中心',
							createTime: '2023/3/20 09:15',
							status: 'active'
						},
						{
							id: 4,
							title: '洗车美容套餐',
							subtitle: '专业洗车美容服务',
							description: '汽车惠民活动走进学校合作',
							image: '/static/index/Snipaste_2025-09-03_22-46-43.jpg',
							originalPrice: 149,
							currentPrice: 99,
							startDate: '2023-3-25 08:00',
							endDate: '2023-4-5 23:59',
							contactPhone: '0379-55555555',
							notes: '学生专享',
							company: '专业洗车美容中心',
							createTime: '2023/3/25 14:20',
							status: 'active'
						}
					];
					
					const deal = mockDeals.find(d => d.id == this.dealId);
					if (deal) {
						this.dealDetail = deal;
					} else {
						this.error = '活动不存在';
					}
					
				} catch (error) {
					console.error('获取团购详情失败:', error);
					this.error = '数据加载失败，请重试';
				} finally {
					this.loading = false;
				}
			}
		},
		// 生命周期
		onLoad(options) {
			if (options.id) {
				this.dealId = options.id;
				this.loadDealDetail();
			} else {
				this.error = '缺少活动ID';
			}
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(135deg, #3183FB 0%, #3183FB 100%);
		padding-top: var(--status-bar-height);
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 30rpx;
	}

	.nav-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.nav-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
		flex: 1;
		text-align: center;
	}

	/* 详情内容 */
	.detail-content {
		padding: 20rpx;
	}

	/* 标题和来源信息 */
	.header-info {
		background-color: white;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.main-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		line-height: 1.4;
		margin-bottom: 20rpx;
		display: block;
	}

	.source-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.company {
		font-size: 24rpx;
		color: #666;
	}

	.create-time {
		font-size: 24rpx;
		color: #999;
	}

	/* 优惠券横幅 */
	.coupon-banner {
		position: relative;
		width: 100%;
		height: 400rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.banner-image {
		width: 100%;
		height: 100%;
	}

	.banner-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 100%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 40rpx;
	}

	.coupon-title {
		font-size: 56rpx;
		font-weight: bold;
		color: white;
		text-align: center;
		margin-bottom: 20rpx;
		text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
	}

	.coupon-subtitle {
		font-size: 28rpx;
		color: rgba(255, 255, 255, 0.9);
		text-align: center;
		margin-bottom: 30rpx;
	}

	.coupon-arrow {
		position: absolute;
		right: 30rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 80rpx;
		height: 80rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrow-text {
		font-size: 40rpx;
		color: white;
		font-weight: bold;
	}

	/* 活动描述 */
	.activity-description {
		background-color: white;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.description-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.6;
	}

	/* 价格和活动信息 */
	.price-info {
		background-color: white;
		padding: 30rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.price-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.current-price {
		font-size: 36rpx;
		color: #ff4444;
		font-weight: bold;
	}

	.original-price {
		font-size: 28rpx;
		color: #999;
		text-decoration: line-through;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
		width: 200rpx;
		flex-shrink: 0;
	}

	.info-value {
		font-size: 28rpx;
		color: #666;
		flex: 1;
		text-align: right;
		line-height: 1.4;
	}

	.contact-phone {
		color: #3183FB;
		text-decoration: underline;
	}

	/* 操作按钮 */
	.action-buttons {
		display: flex;
		gap: 20rpx;
		padding: 20rpx;
	}

	.contact-btn {
		flex: 1;
		height: 88rpx;
		background-color: #f8f9fa;
		border: 2rpx solid #3183FB;
		border-radius: 44rpx;
		color: #3183FB;
		font-size: 30rpx;
		font-weight: 500;
	}

	.buy-btn {
		flex: 2;
		height: 88rpx;
		background-color: #3183FB;
		border: none;
		border-radius: 44rpx;
		color: white;
		font-size: 30rpx;
		font-weight: 500;
	}

	/* 加载状态 */
	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}

	.loading-text {
		font-size: 28rpx;
		color: #666;
	}

	/* 错误状态 */
	.error {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 400rpx;
		padding: 40rpx;
	}

	.error-text {
		font-size: 28rpx;
		color: #ff4444;
		margin-bottom: 30rpx;
		text-align: center;
	}

	.retry-btn {
		width: 200rpx;
		height: 60rpx;
		background-color: #3183FB;
		border: none;
		border-radius: 30rpx;
		color: white;
		font-size: 26rpx;
	}
</style>
